<template>
	<view class="fiveloading">
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
	</view>
</template>

<script>
</script>

<style scoped>
	.fiveloading {
		width: 5rem;
		height: 0.5rem;
		position: fixed;
		z-index: 999;
		overflow: visible;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.fiveloading text {
		display: inline-block;
		margin-right: 0.1rem;
		margin-left: 0.1rem;
		width: 0.3rem;
		height: 0.5rem;
		border-radius: 0.1rem;
		background: lightgreen;
		-webkit-animation: load 1s ease infinite;
	}

	@-webkit-keyframes load {

		0%,
		100% {
			height: 0.8rem;
			background: lightgreen;
		}

		50% {
			height: 2rem;
			/* margin: -15px 0 0 0; */
			background: lightblue;
		}
	}

	.fiveloading text:nth-child(2) {
		-webkit-animation-delay: 0.2s;
	}

	.fiveloading text:nth-child(3) {
		-webkit-animation-delay: 0.4s;
	}

	.fiveloading text:nth-child(4) {
		-webkit-animation-delay: 0.6s;
	}

	.fiveloading text:nth-child(5) {
		-webkit-animation-delay: 0.8s;
	}
</style>
